<template>
  <div id="app">
	<div class="title">积分商城</div>
	<el-tabs @tab-click="onTabChange" v-model="tabActived" type="card">
		<el-tab-pane label="兑换记录" name="records">
			<exchange-records></exchange-records>
		</el-tab-pane>
		<el-tab-pane label="商品管理" name="goods">
			<goods-list v-if="tabActived == 'goods'"></goods-list>
		</el-tab-pane>
	</el-tabs>
  </div>
</template>

<script>
import ExchangeRecords from './exchangeRecords';
import GoodsList from './goodsList';
export default {
	components: {
		'exchange-records': ExchangeRecords,
		'goods-list': GoodsList
	},
	data() {
		return {
			tabActived: 'records',
		};
	},
	created(){
		if(this.$route.params.tab == 'goods'){
			this.tabActived = 'goods'
		}else{
			this.tabActived = 'records'
		}
	},
	methods: {
		onTabChange(tab){
			let url = '';
			if(tab.name == 'goods'){
				url = '/goods'
			}
			this.$router.replace('/increment/integral'+url);
		},
	},
	mounted() {

	}
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
  font-size: 21px;
  margin-top: 65px;
}
.tableBtnTop{
	margin-top:20px;
}
</style>